<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<ui:composition template="/resources/templates/base_template.xhtml">

    <ui:define name="body">

        <!-- TODO : c'e' un errore che genera una NPE lato server su IE 8 sulla "decode sort event",
  qualche problema con l'id della colonna da sortare.
  forse IE8 non supporta HTML5 ? -->
        <!--h:outputScript name="js/datatableFilterClientSide.js" target="head" /-->

        <h:panelGrid columns="5" style="margin-top: 5px; margin-bottom: 3px;">
            <!--p:commandButton value="Clear Filters" onclick="datatableWidget.clearFilters()"/-->
            <p:commandButton value="Create"/>
            <p:commandButton value="Edit"/>
            <p:commandButton value="Export XLS"/>
        </h:panelGrid>

        <h:panelGrid columns="2" styleClass="cellaligntop">

            <p:dataTable id="datatable_jsId" value="#{basicDatatable.usersDataModel}" var="anag"
                         widgetVar="datatableWidget" styleClass="datatable_small_font"
                         paginator="true" paginatorPosition="bottom" rows="20" sortBy="#{anag.office}"
                         selectionMode="single" selection="#{basicDatatable.selAnagrafica}">

                <p:ajax event="rowDblselect"
                        update=":form:display" oncomplete="anagDialog.show()"/>


                <p:column headerText="Office" width="130" sortBy="#{anag.office}" filterBy="#{anag.office}">
                    <h:outputText value="#{anag.office}"/>
                </p:column>

                <p:column headerText="Nome Office" width="160">
                    <h:outputText value="#{anag.nomeOffice}"/>
                </p:column>
                <!--      id="firstNameColumn_jsId"
                                    <p:column headerText="Regione" width="150">
                                        <h:outputText value="#{anag.regione}"/>
                                    </p:column>

                                    <p:column headerText="Prov" width="100" sortBy="#{anag.provincia}" filterBy="#{anag.provincia}" filterOptions="#{basicDatatable.listaProvince}">
                                        <h:outputText value="#{anag.provincia}"/>
                                    </p:column>
                -->
                <p:column headerText="Comune" width="160" sortBy="#{anag.comune}">
                    <h:outputText value="#{anag.comune}"/>
                </p:column>

                <p:column headerText="Tipo" width="100" filterOptions="#{basicDatatable.tipoApparato}"
                          filterBy="#{anag.tipo}">
                    <h:outputText value="#{anag.tipo}"/>
                </p:column>

                <p:column headerText="Posizionamento" width="100"
                          filterOptions="#{basicDatatable.posizionamentoApparato}" filterBy="#{anag.posizionamento}">
                    <h:outputText value="#{anag.posizionamento}"/>
                </p:column>

                <p:column headerText="Budget" width="100" filterOptions="#{basicDatatable.budgetApparato}"
                          filterBy="#{anag.budget}">
                    <h:outputText value="#{anag.budget}"/>
                </p:column>

            </p:dataTable>

            <p:panel header="Description">
                <p>Demo della pagina di anagrafica Apparati/Siti</p>

                <p>Sort / Filter client side, da valutae le perfomance su 12000 elementi circa</p>

                <p>DblClick su un elemento per aprire un popup di dettaglio.</p>

                <!--p>Datatable with sorting &amp; filtering implemented with the basic Primefaces ajax methods</p>
        <p>filter and order is persisted between sessions with the HTML localStore</p>
        <p>NB : id MUST be specified for all columns with filtering enabled</p>
        <p>NB : persistence can be swithced to session with sessionStore instead of localStore</p>
        <p>TODO : ordering is not resetted on clear filters.</p-->
            </p:panel>

            <p:dialog id="dialog" header="Dettaglio" widgetVar="anagDialog" resizable="false" modal="true" width="400"
                      height="400" >

                <h:panelGrid id="display" columns="2" cellpadding="4">

                    <h:outputText value="Office : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.office}"/>
                    <h:outputText value="Nome Office: "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.nomeOffice}"/>
                    <h:outputText value="Gestore : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.gestore}"/>
                    <h:outputText value="Zona : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.zona}"/>
                    <h:outputText value="Regione : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.regione}"/>
                    <h:outputText value="Provincia: "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.provincia}"/>
                    <h:outputText value="Comune : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.comune}"/>
                    <h:outputText value="Tipo : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.tipo}"/>
                    <h:outputText value="Posizionamento : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.posizionamento}"/>
                    <h:outputText value="Budget : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.budget}"/>
                    <h:outputText value="Latitudine : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.latitudine}"/>
                    <h:outputText value="Longitudine: "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.longitudine}"/>
                    <h:outputText value="Posizionamento : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.posizionamento}"/>
                    <h:outputText value="Data Creazione : "/>
                    <h:outputText value="#{basicDatatable.selAnagrafica.dataCreazione}">
                        <f:convertDateTime pattern="dd-MM-yyyy"/>
                    </h:outputText>

                </h:panelGrid>
            </p:dialog>

        </h:panelGrid>

    </ui:define>

</ui:composition>

</html>